<template>
  <div class="workflow-history">
    <div class="search-box">
      <p class="search-item">
        <span>计划时间：</span>
        <el-date-picker
          v-model="planTime"
          type="datetimerange"
          size="small"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </p>
      <p class="search-item">
        <span>状态：</span>
        <el-select v-model="searchForm.state" placeholder="请选择" clearable size="small">
          <el-option
            v-for="item in statusList"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p class="search-item">
        <span>运行类型：</span>
        <el-select v-model="searchForm.run_type" placeholder="请选择" clearable size="small">
          <el-option
            v-for="item in runTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <el-button type="primary" size="small" @click="search(planTime)">搜索</el-button>
      <el-button type="text" @click="search">重置</el-button>
    </div>
    <el-table v-loading="loading" :data="lists" size="small" style="width: 100%">
      <el-table-column
        v-for="col in tableColumns"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :key="col.prop"
      >
        <template slot-scope="scope">
          <span v-if="col.type === 'time'"> {{ scope.row[col.prop] | format }}</span>
          <span class="state" v-else-if="col.type === 'state'" :class="scope.row[col.prop]">
            {{ scope.row[col.prop] }}
          </span>
          <span v-else>{{ scope.row[col.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <!-- 查看详情 -->
          <el-button
            type="primary"
            icon="el-icon-view"
            circle
            size="mini"
            @click="showDetail(scope.row)"
          ></el-button>
          <el-popconfirm
            v-if="scope.row.state == 'running'"
            confirm-button-text="确定"
            cancel-button-text="取消"
            title="确定停止吗？"
            @onConfirm="handleStop(scope.$index, scope.row)"
          >
            <el-button v-if="scope.row.run_type !== 'backfill'" slot="reference" size="mini" icon="el-icon-video-pause" type="danger" circle></el-button>
          </el-popconfirm>
          <el-popconfirm
            v-if="scope.row.state == 'failed'"
            confirm-button-text="确定"
            cancel-button-text="取消"
            title="确定重试吗？"
            @onConfirm="retryFailed(scope.$index, scope.row)"
          >
            <el-button v-if="scope.row.run_type !== 'backfill'" slot="reference" size="mini" icon="el-icon-refresh" type="success" circle></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情展示 -->
    <task-detial ref="detail"></task-detial>
    <!-- 分页 -->
    <div style="float: right; margin-top: 8px">
      <el-pagination
        :total="totalCount"
        :current-page="pageParams.page"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import TaskDetial from "../components/task-detail";
export default {
  name: "WorkflowHistory",
  components: { TaskDetial },
  data() {
    return {
      lists: [],
      tableColumns: [
        {
          prop: "dag_id",
          label: "工作流ID",
          // width: "180"
        },
        {
          prop: "run_type",
          label: "运行类型",
          type: "run_type"
        },
        {
          prop: "execution_date",
          label: "计划时间",
          // width: "180",
          type: "time"
        },
        {
          prop: "start_date",
          label: "开始时间",
          // width: "180",
          type: "time"
        },
        {
          prop: "end_date",
          label: "结束时间",
          // width: "180",
          type: "time"
        },
        {
          prop: "external_trigger",
          label: "是否触发"
          // width: "120"
        },
        {
          prop: "state",
          label: "状态",
          type: "state"
          // width: "120"
        }
      ],
      loading: false,
      planTime: null,
      searchForm: {
        state: "",
        run_type: "",
      },
      pageParams: {
        page: 1,
        page_size: 10
      },
      statusList: [
        {
          id: "1",
          label: "failed",
          value: "failed"
        },
        {
          id: "2",
          label: "success",
          value: "success"
        },
        {
          id: "3",
          label: "running",
          value: "running"
        }
      ],
      runTypeList: []
    };
  },
  computed: {
    ...mapState({
      currentTab: ({ data }) => {
        return data.currentTab || {};
      }
    })
  },
  watch: {
    ["currentTab.id"](newval) {
      if (newval) this.initData();
    }
  },
  mounted() {
    this.initData();
    this.$bus.$on("refresh-workflow-history", () => {
      this.initData();
    });
    this.$http.manageworkflow.getRunTypeList().then(res => {
      this.runTypeList = res;
    });
  },
  methods: {
    initData() {
      let execution_date_from = ''
      let execution_date_to = ''
      if (this.planTime) {
        execution_date_from = new Date(this.planTime[0]).getTime();
        execution_date_to = new Date(this.planTime[1]).getTime();
      } else {
        execution_date_from = "";
        execution_date_to = "";
      }
      this.$http.manageworkflow
        .getWorkflowList({
          ...this.pageParams,
          execution_date_from,
          execution_date_to,
          // dag_name: this.currentTab.name,
          dag_id: this.currentTab.dag_id,
          project_id: this.$route.query.project_id,
          ...this.searchForm
        })
        .then(res => {
          this.lists = res.items;
          this.totalCount = res.total;
        });
    },
    search(planTime = ''){
      this.pageParams.page = 1
      this.planTime = planTime
      this.initData()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val;
      this.initData();
    },
    handleStop(index, row) {
      this.$http.workflow
        .stopWorkflow({
          dag_id: row.dag_id,
          execution_date: row.execution_date
        })
        .then(res => {
          this.initData();
        });
    },
    retryFailed(index, row) {
      this.$http.workflow
        .retryFailed({
          dag_id: row.dag_id,
          execution_date: row.execution_date,
          project_id: row.execution_date
        })
        .then(res => {
          this.initData();
        });
    },
    showDetail(row) {
      this.$refs.detail.showDetail(row);
    }
  }
};
</script>
<style lang="scss" scoped>
.workflow-history{
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  .state{
    display: inline-block;
    text-align: center;
    height: 25px;
    border-radius: 15%;
    color: white;
    &.failed{
      width: 50px;
      background:#CC3366;
    }
    &.success{
      width: 60px;
      background:#00CC33;
    }
    &.shutdown{
      width: 65px;
      background:#990099;
    }
    &.running{
      width: 65px;
      background:#3366FF;
    }
    &.queued{
      width: 60px;
      background:gray;
    }
    &.up_for_retry{
      width: 100px;
      background: gold;
    }
    &.up_for_reschedule{
      width: 120px;
      background: turquoise;
    }
    &.upstream_failed{
      width: 120px;
      background: orange;
    }
    &.skipped{
      width: 65px;
      background: pink;
    }
    &.removed{
      width: 65px;
      background: lightgrey;
    }
    &.scheduled{
      width: 70px;
      background: tan;
    }
    &.none{
      width: 60px;
      background: lightblue;
    }
    &.sensing{
      width: 70px;
      background: lightseagreen;
    }
  }
  .search-box{
    display: flex;
    align-items: center;
    .search-item{
      margin-right: 20px;
    }
  }
}
</style>